import React from "react";
import {ScrollView, View} from "react-native";
import chjStyle from "../../../CustomStyle";
import ModuleCommonHeader from "../../module/ModuleCommonHeader";
import InputTextItem from "../common/InputTextItem";
import CommonTextItem from "../common/CommonTextItem";
import CommonPhotoSelection from "../common/CommonPhotoSelection";
import CarEngine from "./CarEngine";
import Util from "../../Util";
import NextButton from "../common/NextButton";
import {Actions} from "react-native-router-flux";

export default class CarFace extends React.Component
{
    // 构造函数，可执行初始化操作
    constructor(props)
    {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {
        };

        if(!Util.selectCar.carface)
            Util.selectCar.carface = Util.defaultCarface();
    }

    // 组件被加载时
    componentDidMount()
    {

    }

    // 组件即将被卸载时
    componentWillUnmount()
    {
    }

    // ------------------------------------------ 拍照item的代码 -------------------------------------
    // 根据名字渲染对应数量的CommonTextItem，并设置一个匿名函数作为回调接收点击事件
    renderPhotoItem(item, i){
        if (i === Util.selectCar.carface.length - 1)
            return (<InputTextItem object={item} autoCapitalize={'characters'} keyboardType={'default'} maxLength={19}/>);
        else
            return (<CommonTextItem object={item} valueRenderer={this.renderValue.bind(this)} ref={'photoItem'+i} onClickedListener={()=>this.onPhotoClicked(item, i)}/>);
    }

    // 新增一个render属性给TextItem，这样可以自定义渲染效果
    renderValue(item)
    {
        return Util.decodePhotoStringToViewString(item);
    }

    // 点击到某一个photoItem的时候，push一个新界面进去，在route中传递Result回调
    onPhotoClicked(item, i){
        Actions.CommonPhotoSelection(
            {
                name:'CommonPhotoSelection',
                component:CommonPhotoSelection,
                title:item.name,
                optionString: item.value,
                onResultListener:(value)=>this.onPhotoResult(value, i)
            }
        );
    }

    // 结果回调，接收的结果value, 另外一个index是用来传递一下点击了哪个
    onPhotoResult(value, index){
        Util.selectCar.carface[index].value = value;
        const viewString = Util.decodePhotoStringToViewString(value);
        this.refs['photoItem'+index].setState({
            v: viewString,
            highlight: viewString !== '正常',
        });
    }
    // ------------------------------------------------------------------------------------------------

    // 组件被渲染时
    render()
    {
        return(
            <View style={chjStyle.mainContainer}>
                <ModuleCommonHeader title='车辆外观(04)' clickedLeft={this.clickedBack.bind(this)} leftText='返回' clickedRight={this.clickedNew.bind(this)} rightText='保存'/>
                <ScrollView
                    style={chjStyle.mainList}>
                    {
                        Util.selectCar.carface.map((item, i)=>this.renderPhotoItem(item,i))
                    }
                </ScrollView>
                <NextButton onClickedListener={()=>this.clickedNew()}/>
            </View>
        );
    }

    clickedBack()
    {
        Actions.pop();
    }

    clickedNew()
    {
        Util.saveData('cars', Util.selectCar);
        Actions.CarEngine(
            {
                name:'CarEngine',
                component:CarEngine,
            }
        );
    }
}
